<template>
  <div class="activity-list">
    <activity-card 
      v-for="activity in activities" 
      :key="activity.id" 
      :activity="activity"
      @click="handleActivityClick(activity.id)" 
    />
    <van-empty v-if="activities.length === 0 && !loading" description="暂无活动" />
    <div class="loading" v-if="loading">
      <van-loading type="spinner" color="#8a2be2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import ActivityCard from './ActivityCard.vue'
import { Activity } from '@/types/activity'

const props = defineProps({
  activities: {
    type: Array,
    required: true,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['activity-click'])

const handleActivityClick = (id) => {
  emit('activity-click', id)
}
</script>

<style scoped>
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
</style>
